<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!-- row -->
<div class="row">
    <div class="col-sm-12">
        <div class="well well-sm">

            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-6">
                    <div class="well well-light well-sm no-margin no-padding">
                        <div class="row">
                            <div class="col-sm-12">
                                <div id="myCarousel" class="carousel fade profile-carousel">
                                    <div class="air air-bottom-right padding-10"></div>
                                    <div class="air air-top-left padding-10">
                                        <h4 class="txt-color-white font-md">
                                            <fmt:formatDate value="${user.lastLoginTime}" type="date" dateStyle="long" timeStyle="short"/>
                                        </h4>
                                    </div>
                                    <ol class="carousel-indicators">
                                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                                        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <!-- Slide 1 -->
                                        <div class="item active">
                                            <img src="img/demo/s1.jpg" alt="">
                                        </div>
                                        <!-- Slide 2 -->
                                        <div class="item">
                                            <img src="img/demo/s2.jpg" alt="">
                                        </div>
                                        <!-- Slide 3 -->
                                        <div class="item">
                                            <img src="img/demo/m3.jpg" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="col-sm-3 profile-pic">
                                        <c:if test="${user.logoPath == null || user.logoPath == ''}">
                                            <img src="img/avatars/male.png">
                                        </c:if>
                                        <c:if test="${user.logoPath != null && user.logoPath != ''}">
                                            <img class="logoPathImg" style="cursor: pointer; width: 100px; height: 100px;" src="<c:url value="${user.logoPath}" />">
                                        </c:if>
                                        <!-- <a href="#" class="thumbnail"> -->
                                        <%-- <div class="hidden">
                                            <label class="input input-file">
                                                <div class="button">
                                                    <input id="file-upload" type="file" name="upload">
                                                </div>
                                            </label>
                                        </div>--%>
                                    </div>
                                    <div class="col-sm-6">
                                        <h1><span>${user.loginName}</span> <br>
                                            <small>
                                                <c:forEach items="${roles}" var="role"  varStatus="loop">
                                                    ${role.name}${!loop.last ? ',' : ''}
                                                </c:forEach>
                                            </small>
                                        </h1>
                                        <ul class="list-unstyled">
                                          <li>
                                                <p class="text-muted">
                                                    <i class="fa fa-phone"></i>&nbsp;&nbsp;
                                                    <a href="javascript:void(0);" class="phone" data-type="text" data-name="phone" data-pk="${user.id}" data-value="${user.phone}">${user.phone}</a>
                                                </p>
                                            </li>
                                            <li>
                                                <p class="text-muted">
                                                    <i class="fa fa-envelope"></i>&nbsp;&nbsp;
                                                    <%--<a href="mailto:${user.email}">${user.email}</a>--%>
                                                    <a href="javascript:void(0);" class="email" data-type="text" data-name="email" data-pk="${user.id}" data-value="${user.email}">${user.email}</a>
                                                </p>
                                            </li>
                                            <li>
                                                <p class="text-muted">
                                                    <i class="fa fa-lg fa-user"></i>&nbsp;&nbsp;
                                                    <a href="javascript:void(0);" class="name" data-type="text" data-name="name" data-pk="${user.id}" data-value="${user.name}">${user.name}</a>
                                                </p>
                                            </li>
                                            <li>
                                                <p class="text-muted">
                                                    <i class="fa fa-calendar"></i>&nbsp;&nbsp;
                                                        <span class="txt-color-darken"><spring:message code="USER_LAST_LOGIN"/>
                                                           <%-- &lt;%&ndash;<c:date name="user.lastLoginTime" format="yyyy年MM月dd日 HH:mm:ss" />&ndash;%&gt;--%>
                                                           <%-- <fmt:formatDate value="${date}" type="date"/>--%>
                                                            <a href="javascript:void(0);" rel="tooltip" title=""
                                                               data-placement="top"
                                                               data-original-title="Create an Appointment">
                                                                <fmt:formatDate value="${user.lastLoginTime}" pattern="a HH:mm"/>
                                                            </a>
                                                        </span>
                                                </p>
                                            </li>
                                            <li>
                                                <p class="text-muted">
                                                    <a href="javascript:void(0);" class="description" id="ta_description" data-type="textarea" data-name="description" data-pk="${user.id}" data-value="${user.description}">${user.description}</a>
                                                </p>
                                            </li>
                                        </ul>
                                        <a class="btn btn-default btn-xs btn-edit" href="javascript:void(0);" id="btn_changePassword"> <i class="fa fa-edit"></i>&nbsp;<spring:message code="EMAIL_CHANGE_PASSWORD"/> </a>
                                        <form id="fm_password" action="user/updatePassword" class="smart-form" method="post" style="display: none">
                                            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                                                <label class="input hidden">
                                                    <input type="text" name="loginName" maxlength="<spring:message code='GLOBAL_FIELD_MAX'/>" value="${user.loginName}">
                                                </label>
                                                <section>
                                                    <label class="label">
                                                        <spring:message var="m_password" code="USER_PASSWORD"/>
                                                        ${m_password}
                                                        <span style="color: red;">*</span>
                                                    </label>
                                                    <label class="input">
                                                        <%--<i class="icon-append fa fa-user"></i>--%>
                                                        <input type="password" name="password" maxlength="<spring:message code='GLOBAL_FIELD_MAX'/>"/>
                                                    </label>
                                                </section>
                                                <section>
                                                    <label class="label">
                                                        <spring:message var="m_NewPassword" code="USER_NEW_PASSWORD"/>
                                                        ${m_NewPassword}
                                                        <span style="color: red;">*</span>
                                                    </label>
                                                    <label class="input">
                                                        <%--<i class="icon-append fa fa-user"></i>--%>
                                                        <input type="password" name="newPassword" id="pwd_newPassword" maxlength="<spring:message code='GLOBAL_FIELD_MAX'/>"/>
                                                    </label>
                                                    <div class="note">
                                                        <spring:message code="VALIDATE_PASSWORD"/>
                                                    </div>
                                                </section>
                                                <section>
                                                    <label class="label">
                                                        <spring:message var="m_repassword" code="USER_REPASSWORD"/>
                                                        ${m_repassword}
                                                        <span style="color: red;">*</span>
                                                    </label>
                                                    <label class="input">
                                                        <%--<i class="icon-append fa fa-user"></i>--%>
                                                        <input type="password" name="repassword" maxlength="<spring:message code='GLOBAL_FIELD_MAX'/>"/>
                                                    </label>
                                                </section>
                                                <div class="text-right form-action-bar">
                                                    <button type="submit" class="btn btn-primary">
                                                        <i class="fa fa-save"></i>&nbsp;<spring:message code="GLOBAL_BUTTON_SAVE"/>
                                                    </button>
                                                    <a href="javascript:void(0);" id="btn_cancle" class="btn btn-default">
                                                        <i class="fa fa-rotate-left"></i>&nbsp;<spring:message code="GLOBAL_BUTTON_CANCEL"/> </a>
                                                </div>
                                                <div class="message">
                                                    <i class="fa fa-check fa-lg"></i>
                                                    <p>
                                                        <spring:message code="GLOBAL_SUCCESS_EDITED"/>
                                                    </p>
                                                </div>
                                            </div>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end row-->
</div>
<script src="js/core/business/user/profileInit.js"></script>

